<template>
  <div ref="portaletDivSignDocument">
    <a-card :bordered="false">
      <div ref="commandstats" style="height: 330px;"/>
    </a-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'piechartsSignDocument',
  props: {
    signDocumentOption: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      commandstats: null,
      roleCode: ''
    }
  },
  watch: {
    signDocumentOption: {
      handler: function (value) {
        const sum = value.reduce((a, b) => (parseInt(a) + parseInt(b.value || 0)), 0)
        value.length > 0 && this.getFirstChart(sum)
      },
      deep: true
    }
  },
  filters: {},
  created () {
    this.roleCode = localStorage.getItem('CURRENT_ROLECODE') || ''
  },
  mounted () {
    window.addEventListener('resize', () => {
      this.commandstats && this.commandstats && this.commandstats.resize()
    })
    this.$emit('setHeight', this.$refs.portaletDivSignDocument.offsetHeight)
  },
  computed: {},
  methods: {
    getFirstChart (sum) {
      // eslint-disable-next-line semi
      !this.commandstats && (this.commandstats = echarts.init(this.$refs.commandstats, 'macarons'));
      this.commandstats.setOption(this.getOptions(sum))
    },
    getOptions (sum) {
      const legendOrient = this.roleCode === 'CRC' || this.roleCode === 'Investigator' ? 'horizontal' : 'vertical'
      const titleText = sum ? '远程签署统计' : ''
      const colors = sum ? ['#0E7EED', '#D17615', '#26C4D9', '#F53F3F', '#8991A3', '#18C478'] : ['#DDE2ED']
      const seriesData = sum ? this.signDocumentOption : [{ value: 0, name: '签署状态' }]
      const self = this
      return {
        title: {
          text: titleText,
          // textAlign: 'center',
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 12,
            // fontWeight: '200',
            color: '#666' // 主标题文字颜色
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function (seriesData) {
            const ratio = ((Number(seriesData.data.value) / Number(sum || 1)) * 100).toFixed(0) + '%'
            let html = ` 
                        <div style="color:#1EA5EB;font-size:12px;">${seriesData.name}</div>
                        ${seriesData.marker} &nbsp;${self.$t('all.autotext1631')}
                      `
            html += sum ? `${seriesData.data.value}&${ratio}` : '0'
            return html
          }
        },
        color: colors,
        legend: {
          y: 'top',
          right: 0,
          icon: 'circle',
          orient: legendOrient, // legend的显示方向horizontal
          itemWidth: 10,
          itemHeight: 10,
          fontSize: 10
        },
        // grid: {
        //   left: 0,
        //   right: 40,
        //   bottom: 0,
        //   top: 0,
        //   containLabel: true
        // },
        series: [{
          name: '现场签署',
          type: 'pie',
          radius: ['50%', '70%'],
          center: ['50%', '50%'],
          // right: circleRight,
          avoidLabelOverlap: false,
          label: {
            show: false,
            fontSize: '16',
            position: 'center',
            formatter: ' {c} \r\n \r\n {b} ',
            borderWidth: 4
          },
          itemStyle: {
            borderRadius: 4,
            borderColor: '#fff',
            borderWidth: 4
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: seriesData
        }]
      }
    }
  }
}
</script>

<style></style>
